﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:odc="clr-namespace:Odyssey.Controls;assembly=Odyssey"
    xmlns:bh="clr-namespace:Odyssey.Behaviors;assembly=Odyssey"
    xmlns:vm="clr-namespace:OdcTest.ViewModels"
    xmlns:ia="clr-namespace:Odyssey.Interactivity;assembly=Odyssey"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    xmlns:primitives="clr-namespace:Odyssey.Controls.Primitives;assembly=Odyssey"
    xmlns:fx="clr-namespace:Odyssey.Effects;assembly=Odyssey"
    xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    x:Class="OdcTest.Views.PanoramaPage" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False" bh:TiltEffect.IsTiltEnabled="True" >

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="contextMenuTemplate">
            <odc:ContextMenu>
                <odc:ContextMenuItem Content="{Binding Name}"/>
                <odc:ContextMenuItem Content="Menu 1"/>
                <odc:ContextMenuItem Content="Menu 2"/>
                <odc:ContextMenuItem Content="Menu 3"/>
            </odc:ContextMenu>
        </DataTemplate>

        <DataTemplate x:Key="pageContextMenuTemplate">
            <odc:ContextMenu>
                <odc:ContextMenuItem Content="choose background"/>
                <odc:ContextMenuItem Content="settings"/>
            </odc:ContextMenu>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <Custom:Interaction.Behaviors>
        <bh:SwingEffectBehavior Angle="-112"/>
    </Custom:Interaction.Behaviors>

    <Custom:Interaction.Triggers>
        <!--trigger must be delayed because otherwise the binding of ContinuumEffect.IsItem would not be reflected:-->
        <ia:DelayedEventTrigger EventName="ItemInvoked" SourceName="listBox3" Milliseconds="0">
            <bh:ContimuumEffectAction Mode="Master" Duration="0:0:0.35" Activated="OnDeactivated"  Scope="listBox3"/>
            <ic:NavigateToPageAction TargetPage="/Views/DetailPage.xaml?effect=longContinuumFx"/>
        </ia:DelayedEventTrigger>

        <Custom:EventTrigger EventName="ItemInvoked" SourceName="listBox1">
            <bh:FeatherEffectAction Duration="0:0:0.20" Amplitude="2"/>
            <ic:NavigateToPageAction TargetPage="/Views/DetailPage.xaml?effect=longSwingFx"/>
        </Custom:EventTrigger>

        <ia:DelayedEventTrigger EventName="ItemInvoked" SourceName="listBox2" >
            <bh:SwivelEffectAction />
            <ic:NavigateToPageAction TargetPage="/Views/DetailPage.xaml?effect=swivelFx"/>
        </ia:DelayedEventTrigger>

    </Custom:Interaction.Triggers>

    <Grid x:Name="LayoutRoot"  >
        <controls:Panorama >
            <controls:Panorama.Title>
                <TextBlock Text="odyssey" fx:FeatherEffect.IsElement="True"  odc:ContextMenu.ContextMenuTemplate="{StaticResource pageContextMenuTemplate}" />
            </controls:Panorama.Title>

            <!--Panorama item one-->
            <controls:PanoramaItem>
                <controls:PanoramaItem.Header>
                    <TextBlock Text="alphabetic" fx:FeatherEffect.IsElement="True" CacheMode="BitmapCache"/>
                </controls:PanoramaItem.Header>
                <Grid>
                    <Grid.DataContext>
                        <vm:JumpListViewModel/>
                    </Grid.DataContext>
                    <odc:OdcListBox x:Name="listBox1" ItemsSource="{Binding Items}"  QuickJumpMode="Alphabetical" 
                                    ItemContainerStyle="{StaticResource panoramaListBoxStyle}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" >
                        <odc:OdcListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid  HorizontalAlignment="Stretch"  odc:ContextMenu.ContextMenuTemplate="{StaticResource contextMenuTemplate}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Fill="{StaticResource PhoneChromeBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="48" VerticalAlignment="Center" Margin="15,4,5,4"/>
                                </Grid>
                            </DataTemplate>
                        </odc:OdcListBox.ItemTemplate>
                        <odc:OdcListBox.HeaderTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource PhoneAccentBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4" HorizontalAlignment="Left" fx:FeatherEffect.IsElement="False">
                                    <TextBlock Text="{Binding Title}" VerticalAlignment="Center" FontSize="32" Margin="5,0" Foreground="White"/>
                                </Border>
                            </DataTemplate>
                        </odc:OdcListBox.HeaderTemplate>
                    </odc:OdcListBox>
                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="grouped" fx:FeatherEffect.IsElement="False">
                <Grid>
                    <Grid.DataContext>
                        <vm:LongJumpListViewModel/>
                    </Grid.DataContext>
                    <odc:OdcListBox x:Name="listBox2" ItemsSource="{Binding Items}"  QuickJumpMode="List">
                        <odc:OdcListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid  HorizontalAlignment="Stretch" odc:ContextMenu.ContextMenuTemplate="{StaticResource contextMenuTemplate}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Fill="{StaticResource PhoneChromeBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="48" VerticalAlignment="Center" Margin="15,4,5,4"/>
                                </Grid>
                            </DataTemplate>
                        </odc:OdcListBox.ItemTemplate>
                        <odc:OdcListBox.HeaderTemplate>
                            <DataTemplate>
                                <Grid  HorizontalAlignment="Stretch" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Fill="{StaticResource PhoneAccentBrush}" Width="72" Height="72" VerticalAlignment="Center" Margin="8,4"/>
                                    <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="48" VerticalAlignment="Center" Margin="15,4,5,4" Foreground="{StaticResource PhoneAccentBrush}" FontWeight="Bold"/>
                                </Grid>
                            </DataTemplate>
                        </odc:OdcListBox.HeaderTemplate>
                    </odc:OdcListBox>

                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item three-->
            <controls:PanoramaItem Header="jump">
                <Grid x:Name="grid3">
                    <Grid.DataContext>
                        <vm:DataViewModel />
                    </Grid.DataContext>
                    <odc:OdcListBox x:Name="listBox3" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" >
                        <odc:OdcListBox.ItemTemplate>
                            <DataTemplate>

                                <Border odc:ContextMenu.ContextMenuTemplate="{StaticResource contextMenuTemplate}">
                                    <Grid x:Name="grid">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="90"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Rectangle Grid.Column="0" Fill="{StaticResource PhoneChromeBrush}" Width="72" Height="72" VerticalAlignment="Center" HorizontalAlignment="Left" />
                                        <TextBlock Grid.Column="1" Text="{Binding Name}" Foreground="{StaticResource PhoneForegroundBrush}"
                                                   fx:ContinuumEffect.IsItem="{Binding IsSelected}"   VerticalAlignment="Center"
                                                   FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                                    </Grid>
                                </Border>

                            </DataTemplate>
                        </odc:OdcListBox.ItemTemplate>
                    </odc:OdcListBox>

                </Grid>
            </controls:PanoramaItem>

        </controls:Panorama>
    </Grid>

</phone:PhoneApplicationPage>